<template>
	<view>
		<tt-bar title="提现记录" leftIcon="icon-back">
		
		</tt-bar>
		<view class="reflectList">
			<block v-for="(item,index) in reflectList" :key="index">
				<view class="row" :data-fid="item.id" @tap="toPage" data-url="reflectProgress">
					<view class="reflectInfo">
						<text class="reflectCount">￥{{item.amount.toFixed(2)}}</text>
						<text class="reflectStatus" :class="[statusStyle[item.status]]">{{statusArr[item.status]}}</text>
					</view>
					<text class="reflectTime">{{item.create_time}}</text>
				</view>
			</block>
			
			
		</view>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import {mapState} from "vuex";
	
	export default {
		components: {
			ttBar,
			emptyBox
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
			})
			
		},
		data() {
			return {
				reflectList:[],
				statusArr:['待审核','已通过','拒绝'],
				statusStyle:['','pass','refuse'],
				pages:1,
			};
		},
		methods:{
			getData(){
				API.getReflectList({
					user_id:this.userInfo.userId,
					store_id:this.selectShop.id,
					page_no:this.pages,
					page_size:10
				}).then(res=>{
					this.pages++
					this.reflectList=this.reflectList.concat(res.data.data.items)
				})
			}
		},
		onLoad() {
			this.getData();
		},
		onReachBottom(){
			this.getData()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.reflectList=[];
				this.pages=1;
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f6f6f6;
	}
	.reflectList{
		margin: 20upx;
		display: flex;
		flex-direction: column;
		.row{
			display: flex;
			background-color: #FFFFFF;
			border-radius: 14upx;
			align-items: center;
			padding: 20upx 36upx;
			margin-bottom: 20upx;
			.reflectInfo{
				display: flex;
				flex-direction: column;
				
				flex: 1;
				.reflectCount{
					font-size: 32upx;
					color: #5b5b5b;
				}
				.reflectStatus{
					font-size: 28upx;
					color: #ff962f;
				}
				.pass{
					color:#3CC51F;
				}
				.refuse{
					color: #DD4A68;
				}
			}
			.reflectTime{
				font-size: 28upx;
				color: #9f9e9e;
			}
		}
		.hasPassed{
			.reflectInfo .reflectStatus{
				color: #b2b2b2;
			}
		}
	}
</style>
